<template>
	<view class="warp bff">
		<view class="home_top"></view>
	
		<view class="phone box-s3 ">
					<view class="title">通币余额</view>
					<view class="money">{{userInfo.now_money}}</view>
					<view class="opration" @click="getMoney()">提现</view>
					<view class="box_b flex">
						<view class="item" @click="jump1">月账单</view>
						<view class="item item2" @click="jumpTo" >银行卡</view>
						<view class="item item3" @click="jump">提现记录</view>
					</view>
		</view>
		<view class="footer">
			<button @click="jump1">明细查询</button>
			<button style="background-color: #FEC860;" @click="getMoney()">申请提现</button>
		</view>
	</view>
</template>

<script>
	import { Withdrawal,userBankList,userinfo} from '../../../api/api.js'
	export default {
		data() {
			return {
				userInfo: {},
				current:0,
				cardList:[]
			};
		},
		onLoad() {
			this.datainit()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods:{
			jump(){
				uni.navigateTo({
					url:"/pages/sf/cashRecord/index"
				})
			},
			jump1(){
				uni.navigateTo({
					url:"/pages/sf/detailedQuery/index"
				})
			},
			// 跳转页面
			jumpTo(){
				uni.navigateTo({
					url:'/pages/users/bankcart/index'
				})
			},
			// 初始化获取银行卡列表
			datainit(){
				userBankList().then(res=>{
					this.cardList = res.data
				})
				userinfo().then(res=>{
					this.userInfo = res.data
					uni.setStorageSync('userInfo',this.userInfo)
				})
			},
			// 提现
			getMoney(){
				if(this.cardList.length == 0) {
					uni.showModal({
						title:'提示!',
						content:'您当前未绑定银行卡,提现需要绑定一张银行卡!点击确认绑定银行卡!',
						showCancel:true,
						success:res=> {
							if(res.confirm){
								this.jumpTo()
							}else{
								uni.showToast({
									title:'取消操作!',
									icon:'none'
								})
							}
						}
					})
					return
				}
				uni.navigateTo({
					url:"/pages/sf/cash/index"
				})
				
			}
			
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fafafa !important;
	}

	.warp_center{
		display: block;
		width: 100%;
		position: absolute;
		top: 20rpx;
		text-align: center;
	}
	.footer{
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
	}
	.home_top {
		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png') ;
		background-size: cover;
		background-repeat: no-repeat;
		background-position-y: -140rpx;
		width: 750upx;
		height: 270upx;
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}

	.warp {
		position: relative;
		.phone {
			position: absolute;
			height: 350rpx;
			background-color: #FFFFFF;
			width: 90%;
			left: 50%;
			opacity: .9;
			border: 2px solid #D7D7D7;
			box-shadow: 0px 3px 10px #DCEBFF;
			transform: translateX(-50%);
			top: 150rpx;
			border-radius: 25rpx;
			/* width: 750upx; */
			box-sizing: border-box;
			.title{
				position: absolute;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
				top: 30rpx;
				left: 30rpx;
			}
			.money{
				position: absolute;
				color: #029E8E;
				font-size: 72rpx;
				top: 100rpx;
				left: 30rpx;
			}
			.opration{
				position: absolute;
				right: 50rpx;
				top:120rpx ;
				color: #FFFFFF;
				background-color:#029E8E;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				width: 120rpx;
				border-radius: 25rpx;
			}
			.box_b{
				position: absolute;
				color: #029E8E;
				width: 90%;
				font-size: 28rpx;
				bottom: 52rpx;
				left: 30rpx;
				.item{
					width: 33.33%;
					text-align: left;
				}
				.item2{
					text-align: center;
					
				}
				.item3{
					text-align: right;
					
				}
			}

		}
	}
</style>
